/* 
  应用中心_服务配置模块
 */
<template>
  <div class="app-container">
    <el-row class="wrapper configmap">
      <el-col :span="24" class="warp-main">
        <div class="el-bar">
          <p style="margin-bottom:10px;">
            <i class="iconfont icon-users"></i>应用查询
          </p>

          <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
               <el-button type="primary"  icon="el-icon-plus" @click="openAddConfigmapDialog">创建配置组</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" plain icon="el-icon-refresh" @click="getConfigMap" >刷新</el-button>
            </el-form-item>   

            <el-form-item>
              <el-button type="primary" plain icon="el-icon-delete" @click="batchDeleteConfigMap" :disabled="this.sels.length===0" >删除</el-button>
            </el-form-item>   

            
            <!-- 状态选择.end -->     

            <el-form-item>
              <el-input v-model="queryKey" placeholder="按配置组名称搜索"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search"  @click="getConfigMap">搜索</el-button>
            </el-form-item>

			<el-form-item>
				<p>
					<span>共<span>{{queryTotal}}</span>条</span>
				</p>
			</el-form-item>

          </el-form>

          <!--数据列表.start-->
          <el-table :data="configmapTableDate" v-loading="loadingConfigMapTable"  @selection-change="selsChange" style="width: 100%">
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column type="expand">
                    <template slot-scope="scope">
                    <!--扩展的数据列表.start-->
                    <configfile :scope="scope" ></configfile>
                    <!--扩展的数据列表.end-->
                    </template>
                </el-table-column>
                <el-table-column prop="configMapName" label="配置组名称" ></el-table-column>
                <el-table-column prop="fileCount" label="配置文件" ></el-table-column>
                <el-table-column prop="createTime" label="创建时间" ></el-table-column>
                <el-table-column prop="tip" label="操作" >
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-plus" @click="openAddConfigFileDialog(scope.$index, scope.row)" ></el-button>
                        <el-button size="small" icon="el-icon-delete" @click="deleteConfigMap(scope.$index, scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--数据列表.end-->

            <!-- 创建配置组对话框.start -->
            <el-dialog title="添加配置组" :visible.sync="addConfigMapVisible" :close-on-click-modal="false">
                <el-form ref="addConfigMapform" :model="addConfigMapform" :rules="addConfigMapformRules" label-width="120px">
                    <el-form-item label="名称" prop="configMapName">
                        <el-input  v-model="addConfigMapform.configMapName" placeholder="名称"></el-input>
                    </el-form-item>
                    <div class="form-btn" style="text-align:right">
                        <el-button @click.native="addConfigMapVisible = false">取消</el-button>
                        <el-button type="primary" @click="addConfigMap">确定</el-button>
                    </div>   
                </el-form>
            </el-dialog>
            <!-- 创建配置组对话框.end -->

            <!-- 添加配置文件对话框.start -->
            <el-dialog title="添加配置文件" :visible.sync="addConfigFileVisible" :close-on-click-modal="false">
                <el-form ref="addConfigFileform" :model="addConfigFileform" :rules="addConfigFileformRules" label-width="120px">
                    <el-form-item label="名称" prop="addfilename">
                        <el-input v-model="addConfigFileform.fileName" placeholder="名称"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" prop="addfilecontent" >
                        <el-input type="textarea" :autosize="{ minRows: 10, maxRows: 15}"  v-model="addConfigFileform.fileContent"></el-input>
                    </el-form-item>
                    <div class="form-btn" style="text-align:right">
                        <el-button @click.native="addConfigFileVisible = false">取消</el-button>
                        <el-button type="primary" @click="addConfigFile" >确定</el-button>
                    </div>
                </el-form>
            </el-dialog>
            <!-- 添加配置文件对话框.end -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { appManagement } from '@/utils/appManagement'
import configfile from "@/components/appCenter/configmap/configfile";
export default {
    components: { configfile },
  	data() {
        // 校验配置组名称
        const validateConfigMapName = (rule, value, callback) => {
            const nameRegex = /(^[a-z]){1}([a-z]|[0-9]|[-]){2,61}([a-z]|[0-9]){1}$/;
			if (value.length < 2) {
				callback(new Error('配置组名称不能为空'));
			} else if (!nameRegex.test(value)) {
				callback(new Error('以[a~z]开头，允许[0~9]、[-]，长度大于4，且以小写英文和数字结尾'));
			} else {
                const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                if (namespace == '' || typeof namespace == undefined) {
                    callback(new Error('请选择一个空间'));
                } else {
                    // 提交后台判断是否存在相同的配置组,同一空间下面
                    const param = {
                        namespace: this.userBaseInfo.getCurrentSelectedNamespace(),
                        configMapName: value
                    }
                    this.httpClient.httpClientget(this.projectConfig.URL_API_APP_CONFIG_VALIDATE_CONFIGMAPNAME,param).then(res => {
                        const code = res.data;
                        if (code != '200') {
                            callback(new Error('配置组名称已经存在'));
                        } else {
                            callback();
                        }
                    })
                }
                
            }
        };

        const validateAddFileName = (rule, value, callback) => {
            // console.log('value=' + this.addFiileform.fileName)
            value = this.addConfigFileform.fileName;
			if (typeof value == 'undefined') {
				callback(new Error('请输入文件名'));
			} else if (value.length < 4 || value.length > 32) {
				callback(new Error('文件名长度为:4-32'));
			} else {
                // 判断同一配置组下面是否存在相同的配置文件名称
                const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
                if (namespace == '' || typeof namespace == undefined) {
                    callback(new Error('请选择一个空间'));
                } else {
                    const param = {
                        namespace: this.userBaseInfo.getCurrentSelectedNamespace(),
                        configMapName: this.addConfigFileform.configMapName,
                        fileName: value
                    }
                    this.httpClient.httpClientget(this.projectConfig.URL_API_APP_CONFIG_VALIDATE_CONFIGFILE,param).then(res => {
                        const code = res.data;
                        if (code != '200') {
                            callback(new Error('配置文件名称已经存在'));
                        } else {
                            callback();
                        }
                    })
                }
            }
        };
        // 修改配置文件,文件内容不能为空
        const validateAddFileContent = (rule, value, callback) => {
            value = this.addConfigFileform.fileContent;
			if (typeof value == 'undefined') {
				callback(new Error('请输入文件内容'));
			} else if (value.length == 0) {
				callback(new Error('请输入文件内容'));
			} else {
                callback();
            }
        };

    	return {
            // 加载table
            loadingConfigMapTable: false,
            // 配置组数量
            queryTotal: 0,
            // 查询关键字
            queryKey: '',
            // 选择陪的配置组集合
            sels: [],
            // 配置组table 数据
            configmapTableDate: [],
            // 创建配置组对话框
            addConfigMapVisible: false,
            // 创建配置组对象
            addConfigMapform: {
                configMapName: '',
                namespace: ''
            },
            // 创建配置文件对话框
            addConfigFileVisible: false,
            // 创建配置文件对象
            addConfigFileform: {
                fileName: '',
                fileContent: '',
                namespace: '',
                configMapName: '',
            },
            // 校验规则
            addConfigMapformRules: {
                configMapName : [
                    { required: true, trigger: 'blur', validator: validateConfigMapName }
                ],
            },
            addConfigFileformRules: {
                addfilename: [
                    { required: true, trigger: 'blur', validator: validateAddFileName }
                ],
                addfilecontent: [
                   { required: true, trigger: 'blur', validator: validateAddFileContent }
                ],
            }
                
            

    	};
	  },
	created() {
		// 查询
		this.getConfigMap();
	},
  	methods: {
		// 选择要删除的配置文件
        selsChange: function(sels) {
            this.sels = sels;
        },
        // 打开创建配置组对话框
        openAddConfigmapDialog() {
            this.addConfigMapVisible = true;
        },
        // 打开创建配置文件对话框
        openAddConfigFileDialog: function(index, row){
            // 打开对话框
            this.addConfigFileVisible = true;
            // 赋值
            this.addConfigFileform.configMapName = row.configMapName;
            this.addConfigFileform.namespace = row.namespace;

            // 至空
            this.addConfigFileform.fileName = '';
            this.addConfigFileform.fileContent = '';
        },
        // 获取配置组数据
        getConfigMap() {
            // 当前空间
            const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            if (namespace == '' || typeof namespace == undefined) {
                return false;
            }
            const param = {
                namespace: namespace,
                queryKey: this.queryKey
            }
            // 获取数据
            this.loadingConfigMapTable = true;
            this.httpClient.httpClientget(this.projectConfig.URL_API_APP_CONFIG_GET_CONFIGMAP_NAMESPACE,param).then(res => {
                this.loadingConfigMapTable = false;
                this.configmapTableDate = res.data;
                this.queryTotal = res.data.length;
            }).catch(error => {
                this.loadingConfigMapTable = false;
            })
        },
        // 创建新的配置组
        addConfigMap() {
            // 当前空间
            const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            if (namespace == '' || typeof namespace == undefined) {
                return false;
            }
            this.addConfigMapform.namespace = namespace;
            // 校验
            this.$refs.addConfigMapform.validate(valid => {
                if (valid) {
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.addConfigMapform.configMapName );
                    // 新增
                    this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_CONFIG_ADD_CONFIGMAP,this.addConfigMapform).then(res => {
                        // 关闭对话框
                        this.addConfigMapVisible = false;
                        // 刷新
                        this.getConfigMap();
                    })
                }
            })  
        },
        // 删除单个配置组
        deleteConfigMap: function(index, row) {
            // 删除确认
            this.$confirm('此操作将永久删除此配置组, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 操作审计
                this.userBaseInfo.setOperObjectName(row.configMapName );
                // 执行删除操作
                this.httpClient.httpClientDelete(this.projectConfig.URL_API_APP_CONFIG_DELETE_CONFIGMAP, row).then(res => {
                    // 刷新页面
                    this.getConfigMap();
                })
            }).catch(() => {
            });
        },
        // 在配置组下,新增配置文件
        addConfigFile() {
            const namespace = this.userBaseInfo.getCurrentSelectedNamespace();
            if (namespace == '' || typeof namespace == undefined) {
                return false;
            }
            
            // 校验
            this.$refs.addConfigFileform.validate(valid => {
                if (valid) {
                    // 操作审计
                    this.userBaseInfo.setOperObjectName(this.addConfigFileform.configMapName + ':' + this.addConfigFileform.fileName );
                    // 新增
                    this.httpClient.httpClientPost(this.projectConfig.URL_API_APP_CONFIG_ADD_CONFIGFILE,this.addConfigFileform).then(res => {
                        // 关闭对话框
                        this.addConfigFileVisible = false;
                        // 刷新页面
                        this.getConfigMap();
                    })
                }
            }) 
        },
        // 批量删除配置组
        batchDeleteConfigMap() {
            const configMapNameList = [];
            configMapNameList.push(this.sels.map(item => item.configMapName).toString())
            const data = {
                namespace: this.userBaseInfo.getCurrentSelectedNamespace(),
                configMapName: configMapNameList.toString()
            };
            this.$confirm('此操作将永久删除这批配置组, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 操作审计
                this.userBaseInfo.setOperObjectName(data.configMapName + ':' + data.fileName );
                // 执行删除操作
                this.httpClient.httpClientDelete(this.projectConfig.URL_API_APP_CONFIG_BATCH_DELETE_CONFIGMAP, data).then(res => {
                    // 刷新页面
                    this.getConfigMap();
                })
            }).catch(() => {
            });
        }
    
        
		

	},
	computed: {
        getCurrentNamespace() {
            return this.$store.getters.namespace;
        }
    },
    watch: {
        getCurrentNamespace(val) {
            // 当选择选择头部空间下拉框的时候,触发事件
            // console.log('我在服务配置页面,监听空间选择=' + val);
            // 获取配置集
            this.getConfigMap();
        },
        
    }
};
</script>
<style>

.el-table .close-row {
    background: #FFFFFF;
}

.el-table .running-row {
    background: #40E0D0;
}

.el-table .error-row {
    background: #FF0000;
}


.page .el-table th > .cell {
	padding:0 18px;
	text-align:left;
}

.page .selected {
  width: 120px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.page .el-select {
  border: 1px solid #eaeaea;
  border-radius: 2px;
}

.page .el-table__expanded-cell {
  padding: 0;
}

.page .extend .el-table {
  padding-left: 20px;
}

.page .extend {
  border: none;
}
.page .el-table .running-row{
    background:#fff;
}
.page .el-table td, .page .el-table th.is-leaf{
		text-align: left;
}
.page .el-icon-setting:before{
	color:#888;
	padding-right:4px;
}
.page .el-icon-circle-check:before, 
.page .el-icon-circle-cross:before, 
.page .el-icon-information:before, 
.page .el-icon-loading:before{
    color: #888;

}

</style>